import React from 'react'
import PropTypes from 'prop-types'
import { sexTypeData, ReportCode } from 'utils/seletLocalData'
import moment from 'moment'
import { config, converDate, defaultValue, SelectProps } from 'utils'
import { Form, Input, Row, Col, Button, Icon, DatePicker, Select } from 'antd'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import styles from '../../themes/detail.less'

const FormItem = Form.Item
const ButtonGroup = Button.Group
const Option = Select.Option
const { TextArea } = Input

const formItemLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
}


const ButtonProps = {
  size: 'large',
  style: {
    marginBottom: 0,
  },
}
const ReportBase = ({
  reportBase,
  dispatch,
  loading,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
}) => {
  const reportBaseInfo = reportBase.data || {}
  const reportPersonInfo = reportBase.data.person || {}
  const { editType, countryCodeData } = reportBase
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      let fieldsValues = getFieldsValue()
      fieldsValues.birthdate = fieldsValues.birthdate.format('YYYY-MM-DD')
      const reportEntity = {
        fiuRefNo: '',
        reference: '',
        rentityBranch: '',
        rentityId: '',
        reportCode: '',
        submissionCode: '',
        action: '',
        memo: '',
        id: '',
      }
      const person = {
        firstName: '',
        middleName: '',
        lastName: '',
        title: '',
        alias: '',
        birthdate: '',
        gender: '',
        birthPlace: '',
        nationality1: '',
        nationality2: '',
        residence: '',
        occupation: '',
        sourceOfWealth: '',
        ssn: '',
        IRDNumber: '',
        comments: '',
      }

      const data = {
        ...fieldsValues,
      }
      data.id = reportBaseInfo.id || 1
      let o = ''
      for (o in person) {
        if ({}.hasOwnProperty.call(person, o)) {
          person[o] = data[o]
        }
      }
      for (o in reportEntity) {
        if ({}.hasOwnProperty.call(reportEntity, o)) {
          reportEntity[o] = data[o]
        }
      }
      reportEntity.person = person
      dispatch({
        type: 'reportBase/update',
        payload: reportEntity,
      })
    })
  }

  const onAddress = () => {
    dispatch(routerRedux.push({
      pathname: `/address/${reportBaseInfo.id}/reportBaseAddress`,
    }))
  }

  const onPhone = () => {
    dispatch(routerRedux.push({
      pathname: `/phone/${reportBaseInfo.id}/reportBasePhone`,
    }))
  }
  const sexData = sexTypeData.map(d => <Option key={d.key}>{d.value}</Option>);
  const countryCode = countryCodeData.map(d => <Option key={d.code}>{d.name}</Option>);
  const reportCodeOptions = ReportCode.map(d => <Option key={d.key}>{d.value}</Option>);
  const dateFormat = 'DD/MM/YYYY'
  return (

    <Form layout="horizontal">
      {editType === 'update' ? <div className={styles.div_buttonGroup}>
        <ButtonGroup {...ButtonProps}>
          <Button onClick={onPhone}>
            Phone<Icon type="phone" />
          </Button>
          <Button onClick={onAddress}>
            Address<Icon type="environment-o" />
          </Button>
        </ButtonGroup>
      </div> : <div />}
      <div className={styles.div_buttonGroup}>
        <ButtonGroup {...ButtonProps}>
          <Button onClick={handleOk} loading={loading.effects['reportBase/update']}>
            Save<Icon type="save" />
          </Button>
        </ButtonGroup>
      </div>
      <div className={styles.div_form}>
        <div className={styles.title}>ReportEntity</div>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="FiuRefNo" hasFeedback {...formItemLayout}>
              {getFieldDecorator('fiuRefNo', {
                initialValue: reportBaseInfo.fiuRefNo,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Reference" hasFeedback {...formItemLayout}>
              {getFieldDecorator('reference', {
                initialValue: reportBaseInfo.reference,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="RentityBranch" hasFeedback {...formItemLayout}>
              {getFieldDecorator('rentityBranch', {
                initialValue: reportBaseInfo.rentityBranch,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="RentityId" hasFeedback {...formItemLayout}>
              {getFieldDecorator('rentityId', {
                initialValue: reportBaseInfo.rentityId,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="ReportCode" hasFeedback {...formItemLayout}>
              {getFieldDecorator('reportCode', {
                initialValue: reportBaseInfo.reportCode,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }} {...SelectProps}>{reportCodeOptions}</Select>)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="SubmissionCode" hasFeedback {...formItemLayout}>
              {getFieldDecorator('submissionCode', {
                initialValue: reportBaseInfo.submissionCode,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="Action" hasFeedback {...formItemLayout}>
              {getFieldDecorator('action', {
                initialValue: reportBaseInfo.action,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="MEMO" hasFeedback {...formItemLayout}>
              {getFieldDecorator('memo', {
                initialValue: reportBaseInfo.memo,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<TextArea autosize={{ minRows: 2, maxRows: 4 }} />)}
            </FormItem>
          </Col>
        </Row>
        <div className={styles.title}>BasicInfo</div>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="FirstName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('firstName', {
                initialValue: reportPersonInfo.firstName,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="MiddleName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('middleName', {
                initialValue: reportPersonInfo.middleName,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="LastName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('lastName', {
                initialValue: reportPersonInfo.lastName,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="Title" hasFeedback {...formItemLayout}>
              {getFieldDecorator('title', {
                initialValue: reportPersonInfo.title,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Alias" hasFeedback {...formItemLayout}>
              {getFieldDecorator('alias', {
                initialValue: reportPersonInfo.alias,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Birthdate" hasFeedback {...formItemLayout}>
              {getFieldDecorator('birthdate', {
                initialValue: reportPersonInfo.birthdate ? moment(converDate(reportPersonInfo.birthdate), dateFormat) : '',
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<DatePicker style={{ width: '100%' }} format={dateFormat} />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label="Gender" hasFeedback {...formItemLayout}>
              {getFieldDecorator('gender', {
                initialValue: reportPersonInfo.gender,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }}>{sexData}</Select>)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="BirthPlace" hasFeedback {...formItemLayout}>
              {getFieldDecorator('birthPlace', {
                initialValue: reportPersonInfo.birthPlace,
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <div className={styles.title}>IdentityInfo</div>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="Nationality1" hasFeedback {...formItemLayout}>
              {getFieldDecorator('nationality1', {
                initialValue: defaultValue(reportPersonInfo.nationality1, 'nationality'),
              })(<Select style={{ width: '100%' }} {...SelectProps}>{countryCode}</Select>)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Nationality2" hasFeedback {...formItemLayout}>
              {getFieldDecorator('nationality2', {
                initialValue: defaultValue(reportPersonInfo.nationality2, 'nationality'),
              })(<Select style={{ width: '100%' }} {...SelectProps}>{countryCode}</Select>)}
            </FormItem>
          </Col>
        </Row>
        <div className={styles.title}>OtherInfo</div>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="Residence" hasFeedback {...formItemLayout}>
              {getFieldDecorator('residence', {
                initialValue: reportPersonInfo.residence,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Select style={{ width: '100%' }} {...SelectProps}>{countryCode}</Select>)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Occupation" hasFeedback {...formItemLayout}>
              {getFieldDecorator('occupation', {
                initialValue: reportPersonInfo.occupation,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Source of Wealth" hasFeedback {...formItemLayout}>
              {getFieldDecorator('sourceOfWealth', {
                initialValue: reportPersonInfo.sourceOfWealth,
              })(<Input />)}
            </FormItem>
          </Col>

          <Col span={8}>
            <FormItem label="SSN" hasFeedback {...formItemLayout}>
              {getFieldDecorator('ssn', {
                initialValue: reportPersonInfo.ssn,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Comments" hasFeedback {...formItemLayout}>
              {getFieldDecorator('comments', {
                initialValue: reportPersonInfo.comments,
              })(<TextArea autosize={{ minRows: 2, maxRows: 4 }} />)}
            </FormItem>
          </Col>
        </Row>
      </div>
    </Form>

  )
}

ReportBase.propTypes = {
  form: PropTypes.object.isRequired,
  dispatch: PropTypes.func,
  reportBase: PropTypes.object,
  loading: PropTypes.object,
}

export default connect(({ reportBase, loading }) => ({ reportBase, loading }))(Form.create()(ReportBase))

